<template>
    <page-view class="flex flex-col">
        <title-bar :show-back="true">购物车列表</title-bar>
        <div class="flex-1 overflow-auto pb-[var(--van-submit-bar-height)]">
            <Tabs animated v-model:active="selectedIndex">
                <Tab title="购物车列表">
                    <List finished-text="已经加载完了" :loading="isLoading" :finished="finished" @load="loadNextShopPage">
                        <TransitionGroup leave-active-class="animate__animated animate__bounceOutLeft">
                            <SwipeCell v-for="item in shopCartListData" :key="item.id">
                                <Card :thumb="baseURL + item.foodInfo.food_img" :title="item.foodInfo.food_name"
                                    :price="item.foodInfo.price">
                                    <template #tags>
                                        <Stepper @plus="plusOne(item.fid)" @minus="minusOne(item.fid)" class="num-box"
                                            min="1" max="100" v-model="item.count" theme="round" button-size="16px">
                                        </Stepper>
                                    </template>
                                    <template #num>
                                        <span class="text-red-500">小计：{{ item.foodInfo.price * item.count }}</span>
                                    </template>
                                </Card>
                                <template #right>
                                    <Button @click="deleteCurrentItem(item.id)" type="danger" square
                                        class="h-full">删除</Button>
                                </template>
                            </SwipeCell>
                        </TransitionGroup>
                    </List>

                </Tab>
                <Tab title="地址列表">
                    <AddressList v-model="chosenAddressId" :list="myAddressInfoList">

                    </AddressList>
                </Tab>
            </Tabs>
        </div>
        <SubmitBar @submit="submitOrder" :price="totalMoney" button-text="提交订单"></SubmitBar>
    </page-view>
</template>
<script>
import { Tab, Tabs, Card, Stepper, SwipeCell, Button, Dialog, SubmitBar, List, AddressList, Notify, Toast } from "vant"
import API from "@/utils/API";
export default {
    name: "ShopCartList",
    inject: ["baseURL"],
    data() {
        return {
            test: 3,
            pageIndex: 1,
            pageCount: 0,
            shopCartListData: [],
            isLoading: false,
            // 我的地址列表
            myAddressInfoList: [],
            // 选择地址的id
            chosenAddressId: "",
            // tab页面的选中的索引
            selectedIndex: 0
        }
    },
    computed: {
        totalMoney() {
            let sum = 0;
            this.shopCartListData.forEach(item => {
                sum += item.count * item.foodInfo.price;
            })
            return sum * 100;
        },
        finished() {
            return this.pageIndex >= this.pageCount;
        }
    },
    created() {
        // 获取我的购物车 
        this.getShopCartListByPage({ pageIndex: this.pageIndex });
        // 获取我的地址
        this.getMyAddressInfoList()
    },
    methods: {
        async getShopCartListByPage({ pageIndex }) {
            let result = await API.shopCart.getShopCartListByPage({ pageIndex });
            // console.log(result);
            this.pageCount = result.pageCount;
            this.shopCartListData.push(...result.listData)
        },
        async deleteCurrentItem(id) {
            Dialog.confirm({
                title: "请确定",
                message: "确定要删除吗"
            }).then(async () => {
                // console.log(id);
                await API.shopCart.deleteMyShopCartFoodById(id);
                //要重新刷新页面，有两种方法，重新请求数据很麻烦，
                // 使用 ：在数据中当前这一样，删除
                let index = this.shopCartListData.findIndex(item => item.id === id);
                if (index != -1) {
                    this.shopCartListData.splice(index, 1);
                }

            }).catch(() => { })
        },
        // 购物车物品当前加一个
        plusOne(fid) {
            API.shopCart.addToShopCart({ fid, count: 1 });
        },
        // 购物车物品当前减一个
        minusOne(fid) {
            API.shopCart.addToShopCart({ fid, count: -1 });
        },
        loadNextShopPage() {
            this.pageIndex++;
            this.getShopCartListByPage({ pageIndex: this.pageIndex })
        },
        async getMyAddressInfoList() {
            let result = await API.addressInfo.getMyAddressInfoList();
            let list = result.map(item => {
                return {
                    id: item.id,
                    name: item.person_name,
                    tel: item.phone,
                    address: item.address,
                    tag: item.tag
                }
            })
            // console.log(list);
            this.myAddressInfoList = list;
        },
        async submitOrder() {
            // 提交订单之前，先判断用户是否选择了地址
            if (this.chosenAddressId) {
                // 第一步：构建要提交的订单的参数
                let orderData = {
                    aid: this.chosenAddressId,
                    foodList: this.shopCartListData.map(item => {
                        return {
                            fid: item.fid,
                            count: item.count
                        }
                    })
                }
                // console.log(orderData);
                await API.orderInfo.submitOrder(orderData);
                Toast.success("订单提交成功");
                this.$router.replace({ name: "Order" });
            } else {
                Notify({
                    type: "warning",
                    message: "请先选择地址"
                })
                this.selectedIndex = 1;
            }

        }
    },
    components: {
        Tab,
        Tabs,
        Card,
        Stepper,
        SwipeCell,
        Button,
        SubmitBar,
        List,
        AddressList
    }
};
</script>
<style scoped lang="scss">
.num-box {
    margin-top: 20px;
    // 样式穿透

}

:deep(.van-address-list__bottom) {
    display: none;
}
</style>